<template>
  <div class="Job new-logo">
    <nav-bar :title="'职位详情'"></nav-bar>
    <div class="circle_bg"></div>
    <div class="content" v-if="data">
      <div class="info-card">
        <h2 class="title">{{ data.jobName }}</h2>
        <div class="types">
          <p class="type">
            <img src="../../assets/dizhi.png" />
            <span
              >{{ data.jobCity_dictText }}·{{ data.jobCounty_dictText }}</span
            >
          </p>
          <p class="type">
            <img src="../../assets/xueli.png" />
            <span>{{ data.eduLevel_dictText }}</span>
          </p>
          <p class="type">
            <img src="../../assets/gongzuojingyan.png" />
            <span>{{ experienceFilter(data) }}</span>
          </p>
        </div>
        <p class="salary">{{ data.minMoney | salaryFilter(data.maxMoney) }}</p>
        <Divider />
        <div class="info">
          <span class="number">招聘人数：{{ data.needCount }}人</span>
          <span class="time">发布时间：{{ data.createTime }}</span>
        </div>
      </div>
      <div class="card">
        <h2 class="title">岗位职责</h2>
        <div class="contents">{{ data.jobDuty }}</div>
      </div>
      <div class="card">
        <h2 class="title">招聘要求</h2>
        <div class="contents">{{ data.jobClaim }}</div>
      </div>
      <div class="card" @click="goCompany">
        <h2 class="title">公司信息</h2>
        <div class="compony-info">
          <img :src="data.enInfoVO.enLogo_dictText" class="logo" />
          <div class="info-discrib">
            <h2 class="name">{{ data.enInfoVO.enName }}</h2>
            <p class="types">
              <template v-if="data.enInfoVO.enPersonnel">
                {{ data.enInfoVO.enPersonnel }}人
                <span class="divider"></span>
              </template>
              <template v-if="data.enInfoVO.enNature">
                {{ data.enInfoVO.enNature }}
                <span class="divider"></span>
              </template>
              {{ data.enInfoVO.enTrade_dictText }}
            </p>
            <p class="types">{{ data.enInfoVO.enAddress_dictText }}</p>
            <p class="types">
              <span>在招聘职位</span>
              <span class="number">{{ data.enInfoVO.postNum }}</span>
              <span>个</span>
            </p>
          </div>
        </div>
      </div>
      <div class="card">
        <h2 class="title">
          同类职位
          <van-icon name="arrow" color="#C6C6C6" @click="forMore(1)" />
        </h2>
        <div
          class="item"
          v-for="(item, index) in sameKinds"
          :key="item.id"
          @click="detail(item.id)"
        >
          <div class="top">
            <h2 class="jobtitle">{{ item.title }}</h2>
            <span class="salary">{{
              item.minMoney | salaryFilter(item.maxMoney)
            }}</span>
          </div>
          <p class="types">
            {{ item.jobCity_dictText }}
            <span class="divider"></span>
            {{ item.eduLevel_dictText }}
            <span class="divider"></span>
            {{ experienceFilter(item) }}
            <span class="divider"></span>
            {{ item.needCount }}人
          </p>
          <p class="compony">{{ item.companyName }}</p>
          <Divider v-if="index < sameKinds.length - 1" />
        </div>
      </div>
      <div class="card" v-if="viewHis.length">
        <h2 class="title">
          看过的职位
          <van-icon name="arrow" color="#C6C6C6" @click="forMore(2)" />
        </h2>
        <div
          class="item"
          v-for="(item, index) in viewHis"
          :key="item.id"
          @click="detail(item.jobId)"
        >
          <div class="top">
            <h2 class="jobtitle">{{ item.opJob.jobName }}</h2>
            <span class="salary">{{
              item.opJob.minMoney | salaryFilter(item.opJob.maxMoney)
            }}</span>
          </div>
          <p class="types">
            {{ item.opJob.jobArea }}
            <span class="divider"></span>
            {{ edulevelFilter(item.opJob) }}
            <span class="divider"></span>
            {{ experienceFilter(item.opJob) }}
            <span class="divider"></span>
            {{ item.opJob.needCount }}人
          </p>
          <Divider v-if="index < viewHis.length - 1" />
        </div>
      </div>
      <div class="card">
        <h2 class="title">
          该公司其他职位
          <van-icon name="arrow" color="#C6C6C6" @click="forMore(3)" />
        </h2>
        <div
          class="item"
          v-for="(item, index) in thisCompany"
          :key="item.id"
          @click="detail(item.id)"
        >
          <div class="top">
            <h2 class="jobtitle">{{ item.title }}</h2>
            <span class="salary">{{
              item.minMoney | salaryFilter(item.maxMoney)
            }}</span>
          </div>
          <p class="types">
            {{ item.jobCity_dictText }}
            <span class="divider"></span>
            {{ item.eduLevel_dictText }}
            <span class="divider"></span>
            {{ experienceFilter(item) }}
            <span class="divider"></span>
            {{ item.needCount }}人
          </p>
          <Divider v-if="index < thisCompany.length - 1" />
        </div>
      </div>
    </div>
    <div class="submitBar">
      <div class="left" @click="collection">
        <img src="../../assets/star.png" v-if="collectState == 1" />
        <img src="../../assets/star_a.png" v-else />
        <span :class="[collectState == 0 ? 'active' : '']"
          >{{ collectState == 0 ? "已" : "" }}收藏</span
        >
      </div>
      <!--      <div class="right" @click="send"><span>投递简历</span></div>-->
      <div class="right" @click="delivery"><span>投递简历</span></div>
    </div>
    <van-action-sheet
      v-model="cvResumeShow"
      :actions="actions"
      @select="onSelect"
    />
  </div>
</template>

<script>
import navBar from "@/components/navBar.vue";
import { Divider, Icon, ActionSheet } from "vant";
import {
  opJobDetail,
  baseSo,
  getUserInfo,
  myList,
  collectState,
  collectionAdd,
  collectionDel,
  cvResumeList,
  opDeliveryHistoryAdd,
  keepAlive_getToken,
  querySimpleResume,
  newadd,
} from "@/api/api";
import Cookies from "js-cookie";

export default {
  //组件注入
  components: { navBar, Divider, Icon, vanActionSheet: ActionSheet },
  //存放数据
  data() {
    return {
      list: [1, 2],
      data: null,
      thisCompany: [],
      sameKinds: [],
      viewHis: [],
      collectState: 1, //0已收藏 1未收藏
      cvResumeList: [],
      actions: [],
      cvResumeShow: false,
      SendResumeFlag: false,
      resumeLanguage: "",
      id: "",
    };
  },
  filters: {
    salaryFilter(a, b) {
      if (b < 1000) {
        return "面议";
      }
      if (a >= 1000) {
        return a / 1000 + "K" + "-" + b / 1000 + "K";
      } else {
        return a + "-" + b;
      }
    },
  },
  //方法集合
  methods: {
    goCompany() {
      this.$router.push({
        path: "../company",
        query: { id: this.data.enInfoVO.id },
      });
    },
    experienceFilter(e) {
      const experience = e.minExperience + "," + e.maxExperience;
      const res = this.$store.state.experience.find(
        (item) => item.value === experience
      );
      return res.label;
    },
    edulevelFilter(e) {
      const level = e.eduLevel + "";
      const res = this.$store.state.eduLevels.find(
        (item) => item.value === level
      );
      return res.label;
    },
    collection() {
      if (!this.$store.state.token) {
        this.$router.push({ path: "/login", query: { back: true } });
        return false;
      }
      if (this.collectState === 0) {
        collectionDel({ id: this.id }).then((res) => {
          this.collectState = 1;
          this.$toast("已取消收藏！");
        });
      } else {
        collectionAdd({ jobId: this.id }).then((res) => {
          this.collectState = 0;
          this.$toast("收藏成功！");
        });
      }
    },
    onSelect(e, index) {
      this.cvResumeShow = false;
      this.sendAction(
        this.cvResumeList[index].lanType,
        this.cvResumeList[index].id
      );
    },
    sendAction(language, resumeId) {
      //  ,'r10': '1' // 调剂标识 1 = 同意 2 = 不同意
      opDeliveryHistoryAdd({
        companyId: "",
        jobId: this.id,
        language,
        resumeId,
        r10: "1",
      }).then((res) => {
        if (res?.code === 200) {
          this.$toast("已投递！");
        } else {
          // this.$toast(res?.message);
          this.SendResumeFlag = false;
          this.$confirm(res.message, "提示", {
            confirmButtonText: "前去编辑简历",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.SendResumeFlag = false;
              //路由到简历页面（）
              if (this.resumeLanguage === 1) {
                this.$router.push({
                  name: "PersonResumeEn",
                  query: { id: this.resumeId },
                });
              } else {
                this.$router.push({ name: "PersonResume" });
              }
            })
            .catch(() => {
              this.SendResumeFlag = true;
            });
        }
      });
    },
    async delivery() {
      // 投递简历
      // this.$toast("请到电脑端“黄河人才网（www.huanghehr.com）”投递简历！");

      try {
        let loginStatus = this.userLoginFlag("");
        if (loginStatus && this.$store.state.token) {
          let _user = JSON.parse(localStorage.getItem("userInfo"));
          // const userInfo = this.$store.state.userInfo;
          const res = await querySimpleResume({
            userId: _user.userId,
          });
          const newResume = res.result?.newResume || {};
          if (res.code === 200 && newResume.id) {
            //简历存在，直接投递
            const res2 = await newadd({
              resumeId: newResume.id,
              jobId: this.data.id,
              r10: "-1",
            });
            if (res2.code === 200) {
              this.$message.success("投递成功");
            } else {
              this.$message.warning(res2.message);
            }
          } else {
            //简历不存在
            this.$router.push({
              name: "PersonSimpleResume",
            });
          }
        } else {
          this.$router.push({ path: "/login", query: { back: true } });
        }
      } catch (error) {
        console.log(error);
      }

      // keepAlive_getToken({ sence: "H5", dayNum: 30 }).then((response) => {
      //   Cookies.set("alive_token", response.message, { expires: 30 });
      //   if (response.code === 200) {
      //     this.SendResumeFlag = true;
      //     this.$router.push({
      //       name: "PersonSimpleResume",
      //       query: { jobName: this.data.jobName },
      //     });
      //     return;
      //   }
      // });
    },
    // 投递简历
    send() {
      // console.log(this.$store.state.userInfo);
      if (!this.$store.state.token) {
        this.$router.push({ path: "/login", query: { back: true } });
        return false;
      } else {
        if (!this.$store.state.canSend) {
          this.$toast("请先完善个人信息");
          //请先完善个人信息
          setTimeout(() => {
            // this.$router.push({name: 'PersonResume'})
            this.$router.push({ name: "PersonResume" });
          }, 1000);
          return false;
        }
      }
      if (this.cvResumeList.length === 1) {
        this.sendAction(this.cvResumeList[0].lanType, this.cvResumeList[0].id);
      } else {
        this.cvResumeShow = true;
      }
    },
    detail(id) {
      window.scrollTo(0, 0);
      document.documentElement.scrollTop = document.body.scrollTop = 0;
      this.$store.commit("changeRecruitScrollY", 0); //离开路由时把位置存起来
      this.$router.replace({ path: this.$route.path });
      this.detailAction(id);
      const newUrl = this.$route.path + `?id=${id}`;
      window.history.replaceState("", "", newUrl);
    },
    detailAction(id) {
      opJobDetail({ id: id }).then((res) => {
        console.log("data", res.result);
        this.data = res.result;
        if (this.$store.state.token) {
          keepAlive_getToken({ sence: "H5", dayNum: 30 }).then((response) => {
            Cookies.set("alive_token", response.message, { expires: 30 });
            if (response.code === 200) {
              collectState({ jobId: id }).then((response) => {
                this.collectState = response.result.collectState;
              });
              this.$store.dispatch("canSend");
              myList({ pageNo: 1, pageSize: 4 }).then((response) => {
                this.viewHis = response.result.records;
              });
              cvResumeList().then((response) => {
                this.cvResumeList = response.result.records;
                this.cvResumeList.forEach((item) => {
                  this.actions.push({ name: item.resumeName });
                });
              });
            }
          });
        }
        baseSo({
          type: "job",
          "companyId.term": res.result.companyId,
          pageNo: 1,
          pageSize: 4,
        }).then((response) => {
          this.thisCompany = response.result.records;
        });
        baseSo({
          type: "job",
          "title.keywords": res.result.jobName,
          pageNo: 1,
          pageSize: 2,
        }).then((response) => {
          this.sameKinds = response.result.records;
        });
      });
    },
    forMore(type) {
      // this.$router.push()
      if (type === 1) {
        this.$router.push({
          path: "/post",
          query: {
            type,
            prams: encodeURI(
              JSON.stringify({
                type: "job",
                "title.keywords": this.data.jobName,
              })
            ),
          },
        });
      } else if (type === 3) {
        this.$router.push({
          path: "/post",
          query: {
            type,
            prams: encodeURI(
              JSON.stringify({
                type: "job",
                "companyId.term": this.data.companyId,
              })
            ),
          },
        });
      } else {
        this.$router.push({ path: "/post", query: { type } });
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  async created() {
    this.detailAction(this.$route.query && this.$route.query.id);
    this.id = this.$route.query && this.$route.query.id;
    let recruitScrollY = this.$store.state.recruitScrollY;
    setTimeout(() => {
      document.documentElement.scrollTop = recruitScrollY;
    }, 100);
  },
  beforeRouteLeave(to, from, next) {
    let position =
      document.documentElement && document.documentElement.scrollTop; //记录离开页面时的位置
    if (position == null) position = 0;
    this.$store.commit("changeRecruitScrollY", position); //离开路由时把位置存起来
    next();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
@import "../../styles/mixin.scss";

.Job {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 140px;

  .content {
    position: relative;
    z-index: 0;

    .info-card {
      padding: 30px;
      border-radius: 15px;
      background: #fff;
      margin: 46px 30px 16px 30px;

      .title {
        font-size: 36px;
        font-weight: 600;
      }

      .types {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin: 20px 0 30px 0;

        .type {
          display: flex;
          align-items: center;
          font-size: 24px;
          margin-right: 20px;
          flex-wrap: nowrap;
          line-height: 40px;

          img {
            width: 30px;
            height: 30px;
            margin-right: 6px;
            display: inline-block;
            vertical-align: middle;
          }
        }
      }

      .salary {
        font-size: 34px;
        font-weight: 600;
        color: #fe3d09;
      }

      .info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24px;

        .number {
          color: #333;
        }

        .time {
          color: #999;
        }
      }
    }

    .card {
      background-color: #fff;
      padding: 30px;
      border-radius: 15px;
      margin: 0 30px 16px 30px;

      .title {
        font-size: 30px;
        font-weight: 600;
        position: relative;
        line-height: 30px;
        margin: 10px 0 30px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &::after {
          position: absolute;
          display: block;
          content: "";
          width: 4px;
          height: 27px;
          background: #e54437;
          left: -30px;
          top: 0;
        }
      }

      .contents {
        color: #333;
        font-size: 24px;
        line-height: 40px;
        // p{
        // 	color: #333;
        // 	font-size: 24px;
        // 	line-height: 40px;
        // 	margin: 15px 0;
        // }
      }

      .compony-info {
        display: flex;
        align-items: flex-start;

        .logo {
          width: 175px;
          height: 75px;
          margin-right: 30px;
          // border-radius: 50%;
        }

        .name {
          font-size: 30px;
          font-weight: 400;
          color: #333333;
        }

        .types {
          // display: flex;
          font-size: 24px;
          // align-items: center;
          margin-top: 10px;
          color: #666;
          // flex-wrap: wrap;
          line-height: 40px;

          .divider {
            display: inline-block;
            width: 1px;
            height: 24px;
            margin: 0 15px;
            background: #e2e2e2;
          }

          .number {
            color: #e54437;
          }
        }
      }

      .item {
        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .jobtitle {
            font-size: 32px;
            font-weight: 600;
            flex: 1 1 auto;
            display: block;
            @include text-ellipsis;
          }

          .salary {
            font-size: 30px;
            color: #fe3d09;
            flex: 0 0 auto;
            margin-left: 20px;
          }
        }

        .types {
          display: flex;
          font-size: 24px;
          align-items: center;
          margin-top: 20px;
          flex-wrap: wrap;
          line-height: 45 rpx;

          .divider {
            display: block;
            width: 1px;
            height: 24px;
            margin: 0 15px;
            background: #e2e2e2;
          }
        }

        .compony {
          margin-top: 25px;
          font-size: 24px;
          color: #999;
        }
      }
    }
  }

  .submitBar {
    position: fixed;
    width: 100%;
    height: 100px;
    background: #fff;
    bottom: 0;
    z-index: 99;
    display: flex;
    align-items: stretch;

    .left {
      flex: 0 0 auto;
      width: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #666666;
      padding: 0 60px;

      img {
        width: 40px;
        height: 40px;
      }

      .active {
        color: #fe3d09;
      }
    }

    .right {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      color: #fff;
      background: #e54437;
    }
  }
}
</style>
